<template>
  <div class="add-payment">
    <div class="header">
      <div class="back" @click="handleBack">
        <van-icon name="arrow-left" class="home-icon" />
      </div>
      <div class="title">Add Bank Card</div>
    </div>

    <div class="form">
      <div class="form-item">
        <div class="label"><span class="required">•</span>Bind Type</div>
        <div class="currency-options">
          <van-button
            class="currency-option"
            :class="{ selected: true }"
            plain
            size="small"
          >
            Bank Card
          </van-button>
        </div>
      </div>

      <div class="form-item">
        <div class="label"><span class="required">•</span>Currency</div>
        <div class="currency-options">
          <van-button
            class="currency-option"
            :class="{ selected: true }"
            plain
            size="small"
          >
            {{ form.currency  }}
          </van-button>
        </div>
      </div>

      <div class="form-item">
        <div class="label"><span class="required">•</span>Bind Name</div>
        <input v-model="form.bankName" type="text" class="" />
      </div>

      <div class="form-item">
        <div class="label"><span class="required">•</span>Account Number</div>
        <input v-model="form.accountNumber" type="text" class="" />
      </div>
      <div class="form-item">
        <div class="label"><span class="required">•</span>Your Name</div>
        <input v-model="form.accountHolder" type="text" class="" />
      </div>
      <div class="form-item">
        <div class="label"><span class="required">•</span>IFSC</div>
        <input v-model="form.accountType" type="text" class="" />
      </div>
      <div class="form-item">
        <div class="label">Phone Number</div>
        <input v-model="form.phoneNumber" type="text" class="" />
      </div>

      <div class="form-item">
        <div class="label">Your Email</div>
        <input v-model="form.email" type="text" class="" />
      </div>
    </div>

    <van-button class="submit-btn" type="primary" block @click="handleSubmit">
      Submit
    </van-button>
  </div>
</template>

<script setup name="Addpayment">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { NavBar, Field, Button, Toast } from "vant";
import { UserApi } from '../api/user.api';
const router = useRouter();
const handleBack = () => {
  router.go(-1); // Go back to the previous page
};

const form = ref({
  bankName: "",
  accountNumber: "",
  accountHolder: "",
  accountType: "",
  phoneNumber: "",
  email: "",
  currency:"INR"
});

const goBack = () => {
  router.go(-1);
};

const handleSubmit = () => {
  // Validate form
  if (
    !form.value.bankName ||
    !form.value.accountNumber ||
    !form.value.accountHolder ||
    !form.value.accountType
  ) {
    Toast("Please fill in all required fields");
    return;
  }
  UserApi.addBankCard({
    "bankName": form.value.bankName,
    "accountNumber": form.value.accountNumber,
    "accountHolder": form.value.accountHolder,
    "accountType": form.value.accountType,
    "phoneNumber": form.value.phoneNumber,
    "email": form.value.email,
    "currency": form.value.currency
  }).then(res => {
    if(res.code === 200) {
      Toast("Bank card added successfully");
      router.go(-1); // Go back to the previous page
    } 
  })
  // Submit logic here
  Toast("Bank card added successfully");
  // router.push('/some-path');
};
</script>

<style scoped>
.add-payment {
  min-height: 100vh;
  background: #f5f5f5;
}
.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.back {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-icon {
  width: 22px;
  height: 22px;
  font-weight: bold;
  margin-top: 6px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.form {
  margin: 12px;
  background: white;
  border-radius: 12px;
  padding: 0 15px;
}

.form-item {
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-weight: 700;
}

.required {
  color: red;
  margin-right: 4px;
}

.currency-options {
  display: flex;
  gap: 10px;
}

.currency-option {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}

.currency-option.selected {
  background: #4460f6;
  color: #fff;
  border-color: #4460f6;
}
input {
  width: 100%;
  height: 36px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 15px;
  color: #333;
  transition: background-color 0.3s;
  caret-color: #4460f6;
  outline: none;
  box-sizing: border-box;
}
.submit-btn {
    margin: 20px 12px;
    height: 44px;
    background: linear-gradient(90deg, #4460F6, #4C6FFF);
    color: #fff;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    width: calc(100% - 24px);
}
</style>
